<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px">
      <el-input placeholder="请输入角色名查询" style="width:500px" v-model="roleName"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
        <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd">添加</el-button>
        <el-button  icon="el-icon-download">导出</el-button>
        <!-- 表格 -->
      <el-table border :data="roleList" ref="multipleTable" style="width:1500px;margin:20px 10px">
        <el-table-column label="ID" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="角色名" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.roleName}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="是否禁用" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="true"
              :inactive-value="0"
              @change="handleShowchange(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" width="600">
          <template slot-scope="scope">
            {{ scope.row.remark}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-present" @click="handleEmpower">授权</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
                 <!-- 分页区域 -->
        <div class="pagination-container" style="margin-right:60px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[7,10,15,20]"
              :page-size="pageSize"
              :current-page="pageNum"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
        </div>
        </el-card>
        <el-dialog
        :title="isEdit?'编辑角色':'添加角色'"
        :visible="isShow"
        width="50%"
        center
        :before-close="handleClose">
        <el-form :model="role"  class="form" style="margin-left:100px"  :inline="true">
            <el-form-item label="角色名称">
              <el-input type="text" v-model="role.roleName" style="width:600px" ></el-input>
            </el-form-item>
        
            <el-form-item label="描述信息">
              <el-input type="textarea" v-model="role.remark" style="width:600px" ></el-input>
            </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSure">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog
        title="分配菜单权限"
        :visible="showEmpower"
        width="50%"
        
        :before-close="closeTree">
       <el-tree
        :data="treeList"
        show-checkbox
        node-key="id"
        :props="defaultProps">
      </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeTree">取 消</el-button>
          <el-button type="primary" @click="sureAssgin">确 定</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
let role={
  roleName:"",
  remark:"",
  id:"",
}
export default {
    data(){
      return{
        role: Object.assign({}, role),
        roleList:[
          {
            id:"1",
            roleName:"系统监控员",
            createTime:"2021-12-8",
            status:0,
            remark:"负责整个系统监控模块"
          }
        ],
        defaultProps: {
            id:"id",
            children: 'children',
            label: 'menuName',
            icon:'icon'
        },
        pageSize:7,
        pageNum:1,
        total:null,
        roleName:"",
        isShow:false,
        isEdit:false,
        showEmpower:false,
        treeList:[]
      }
    },
    mounted(){
      this.getRolesList();
      this.getmenuTree()
    },
    methods:{
      //获取角色列表信息
      async getRolesList(){
        let res =  await this.$http.get("/role/findRoleList?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&roleName="+this.roleName);
        console.log(res)
        if(res.data.code===200){
          this.roleList=res.data.data.rows
          this.total = res.data.data.total
          this.$message.success("角色列表信息获取成功")
        }
      },
      //头部搜索
      handleSearch(){
        if(this.roleName===null){
          this.$message.warning("请输入要搜索的角色名")
        }else{
          this.getRolesList()
        }
      },
      //页码变化
      handleCurrentChange(val){
        this.pageNum = val
        this.getRolesList()
      },
     //点击一页显示多少条
     handleSizeChange(val){
      this.pageSize = val
      this.pageNum = 1
      this.getRolesList()
     },
     //禁用按钮转换
     async handleShowchange(index,row){
       let id = row.id
       let status =  row.status
      let res =  await this.$http.put("role/updateStatus/"+id+"/"+status)
      // let res =  await this.$http.put(`role/updateStatus/:${{id}}/:${{status}}`)
      if(res.data.code===200){
          this.getRolesList()
          this.$message.success("更新状态成功")
      }else{
          this.$message.warning("更新状态失败")
      }
      
     },
      //小叉子和取消
     handleClose(){
       this.isShow  = false
       this.isEdit = false
       this.user = Object.assign({}, role)
     },
     //确定
     async handleSure(){
       if(this.isEdit){
          let res = await this.$http.put("role/update/"+this.role.id,this.role)
          console.log(res)
          if(res.data.code===200){
            this.getRolesList()
            this.isShow=false
            this.isEdit=false
            this.role=Object.assign({}, role)
              this.$notify({
            title: '成功',
           message: '角色编辑成功',
          type: 'success'
        });
          }else{
            this.$message.warning("角色编辑失败")
          }
       }else{
         let res =  await this.$http.post("role/add",this.role);
       console.log(res)
       if(res.data.code===200){
            this.getRolesList()
            this.$message.success("添加角色成功")
            this.isShow=false
            this.role=Object.assign({}, role)
       }else{
         this.$message.warning("添加角色失败")
       }
       }
     },
     //添加
     handleAdd(){
       this.isShow=true
     },
     //编辑
    async handleEdit(index,row){
          let res = await this.$http.get("role/edit/"+row.id)
        console.log(res)
          if(res.data.code===200){  
            this.isShow = true
           this.isEdit = true
            this.role = res.data.data
          }else{
            this.$message.warning("角色编辑失败")
          }

     },
     //删除
     handleDel(id){
         this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res =  await this.$http.delete(`/role/delete/${id}`);
         
          if(res.data.code===200){
            this.getRolesList()
            this.$message.success("删除成功")
          }else{
            this.$message.warning("删除失败")
          }
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     },
     //点击授权
     handleEmpower(){
        this.showEmpower =true
     },
     //获取树形菜单数据
        async getmenuTree(){
         let res = await this.$http.get("/menu/tree");
         if(res.status===200){
           this.treeList = res.data.data.tree
         }
         console.log(res)
      },
      //树形菜单的叉子和取消
      closeTree(){
        this.showEmpower = false
      },
      //确定分配菜单权限
      sureAssgin(){
        
      }
    }
}
</script>

<style>

</style>